import React from 'react'
import {
  Image,
  StyleSheet,
} from 'react-native';

import { StackNavigator, TabBarBottom ,TabNavigator } from 'react-navigation';
import HomeScreen from './pages/Home'
import DiscoverScreen from './pages/Discover'
import DetailScreen from './pages/Detail'
import TabBarItem from "./containers/TabBarItem";

const TabBar = TabNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions:({ navigation }) => ({
      headerTitle: '首页',
      tabBarLabel: '首页',
      tabBarIcon:( {foucsed, tintColor}) => (
        <TabBarItem
          tintColor={tintColor}
          focused={foucsed}
          normalImage={require('./img/home.png')}
          selectedImage={require('./img/home_selected.png')}
        />
      )
    })
  },
  Discover: {
    screen: DiscoverScreen,
    navigationOptions:({ navigation }) => ({
      headerTitle: '发现',
      tabBarLabel: '发现',
      tabBarIcon:( {foucsed, tintColor}) => (
        <TabBarItem
          tintColor={tintColor}
          focused={foucsed}
          normalImage={require('./img/discovery.png')}
          selectedImage={require('./img/discover_selected.png')}
        />
      )
    })
  },
},
  {
    tabBarComponent: TabBarBottom,
    animationEnabled: false, // 切换页面时是否有动画效果
    tabBarPosition: 'bottom', // 显示在底端，android 默认是显示在页面顶端的
    swipeEnabled: false, // 是否可以左右滑动切换tab
    backBehavior: 'none', // 按 back 键是否跳转到第一个Tab(首页)， none 为不跳转
    tabBarOptions: {
      activeTintColor: 'rgb(34, 207, 217)',
      inactiveTintColor: '#222',
      labelStyle: {
        fontSize: 10,
        marginBottom: 5,
      },
      style: {
        backgroundColor: 'rgb(246, 247, 248)'
      },
    },
});

const Root = StackNavigator(
  {
    Tab: {screen: TabBar},
    Detail: {screen: DetailScreen}
  },
  {
    navigationOptions:{
      headerBackTitle:null,
      eaderTintColor:'#333333',
      showIcon:true,
    }
  }
);

export default Root;